// src/recipe-detail/RecipeSteps.tsx
import React, { useState } from 'react';
import { Card, Image, Row, Col, Tag, Typography, Space, Divider, Button } from 'antd';
import { BulbOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';

const { Title, Text } = Typography;

interface Step {
  id: number;
  stepOrder: number;
  description: string;
  tips?: string;
  imagePath?: string;
}

interface RecipeStepsProps {
  steps: Step[];
  colorConfig?: {
    primary: string;
    primaryDark: string;
    border: string;
    background: string;
    badge: string;
    tabActive: string;
  };
}

const RecipeSteps: React.FC<RecipeStepsProps> = ({ steps, colorConfig }) => {
  const [currentStepIndex, setCurrentStepIndex] = useState(0);

  // 默认颜色配置
  const defaultColorConfig = {
    primary: '#e8d9c7',
    primaryDark: '#8b4513', 
    border: '#d4b896',
    background: '#f8f4f0',
    badge: '#a0522d',
    tabActive: '#e8d9c7',
  };

  const colors = colorConfig || defaultColorConfig;

  // 图片URL处理函数
  const getImageUrl = (imagePath: string) => {
    if (!imagePath) return '';
    if (imagePath.startsWith('http')) return imagePath;
    return `http://218.244.141.86:8080${imagePath}`;
  };

  const handleStepClick = (index: number) => {
    if (index >= 0 && index < steps.length) {
      setCurrentStepIndex(index);
    }
  };

  const handlePrevStep = () => {
    if (currentStepIndex > 0) {
      setCurrentStepIndex(currentStepIndex - 1);
    }
  };

  const handleNextStep = () => {
    if (currentStepIndex < steps.length - 1) {
      setCurrentStepIndex(currentStepIndex + 1);
    }
  };

  const currentStep = steps[currentStepIndex];

  if (!steps || steps.length === 0) {
    return (
      <Card
        style={{
          background: 'white',
          borderRadius: '12px',
          border: `1px solid ${colors.border}`,
          padding: '20px',
          boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
          height: '500px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: colors.primaryDark
        }}
      >
        暂无步骤信息
      </Card>
    );
  }

  return (
    <Card
      style={{
        background: 'white',
        borderRadius: '12px',
        border: `1px solid ${colors.border}`,
        padding: '20px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
        minHeight: '600px',
        display: 'flex',
        flexDirection: 'column',
      }}
      bodyStyle={{ flex: 1, display: 'flex', flexDirection: 'column' }}
    >
      {/* 步骤导航条 */}
      <div style={{ marginBottom: '16px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
          <Title 
            level={4} 
            style={{ 
              margin: 0,
              color: colors.primaryDark
            }}
          >
            制作步骤 ({currentStepIndex + 1}/{steps.length})
          </Title>
          
          {/* 导航按钮 */}
          <Space>
            <Button
              size="small"
              icon={<LeftOutlined />}
              onClick={handlePrevStep}
              disabled={currentStepIndex === 0}
              style={{
                borderColor: colors.border,
                color: colors.primaryDark,
                borderRadius: '16px',
                fontWeight: 'bold'
              }}
            >
              上一步
            </Button>
            <Button
              size="small"
              icon={<RightOutlined />}
              onClick={handleNextStep}
              disabled={currentStepIndex === steps.length - 1}
              style={{
                borderColor: colors.border,
                color: colors.primaryDark,
                borderRadius: '16px',
                fontWeight: 'bold'
              }}
            >
              下一步
            </Button>
          </Space>
        </div>

        {/* 步骤标签 */}
        <div style={{ overflowX: 'auto', paddingBottom: '8px' }}>
          <Space wrap style={{ flexWrap: 'nowrap', minWidth: 'min-content' }}>
            {steps.map((step, index) => (
              <Tag
                key={step.id}
                color={index === currentStepIndex ? colors.badge : 'default'}
                onClick={() => handleStepClick(index)}
                style={{ 
                  cursor: 'pointer', 
                  fontSize: '14px',
                  backgroundColor: index === currentStepIndex ? colors.badge : colors.primary,
                  border: 'none',
                  borderRadius: '16px',
                  color: index === currentStepIndex ? 'white' : colors.primaryDark,
                  fontWeight: 'bold',
                  padding: '6px 16px',
                  minWidth: '70px',
                  textAlign: 'center',
                  transition: 'all 0.3s ease',
                  whiteSpace: 'nowrap'
                }}
              >
                步骤{step.stepOrder}
              </Tag>
            ))}
          </Space>
        </div>
      </div>

      <Divider style={{ margin: '16px 0', borderColor: colors.border }} />

      {/* 步骤内容区 - 优化布局 */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
        <Row gutter={[24, 16]} style={{ flex: 1, height: '100%' }}>
          {/* 左侧：大图 - 增大图片区域 */}
          <Col xs={24} lg={12} xl={10}>
            <div style={{ 
              display: 'flex', 
              justifyContent: 'center', 
              alignItems: 'center', 
              height: '100%',
              minHeight: '400px'
            }}>
              {currentStep.imagePath ? (
                <Image
                  src={getImageUrl(currentStep.imagePath)}
                  alt={`步骤${currentStep.stepOrder}`}
                  style={{
                    width: '100%',
                    height: '400px', // 增加图片高度
                    objectFit: 'cover',
                    borderRadius: '12px',
                    border: `1px solid ${colors.border}`,
                    boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
                  }}
                  preview={{
                    mask: '点击查看大图',
                    maskClassName: 'image-preview-mask'
                  }}
                  onError={(e) => {
                    e.currentTarget.src = '';
                  }}
                />
              ) : (
                <div
                  style={{
                    width: '100%',
                    height: '400px', // 增加无图区域高度
                    backgroundColor: colors.background,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    borderRadius: '12px',
                    fontSize: '16px',
                    color: colors.primaryDark,
                    border: `2px dashed ${colors.border}`,
                    flexDirection: 'column',
                    gap: '8px'
                  }}
                >
                  <div>暂无步骤图片</div>
                  <Text type="secondary" style={{ fontSize: '12px' }}>
                    该步骤暂无配图
                  </Text>
                </div>
              )}
            </div>
          </Col>

          {/* 右侧：文字 + 提示 - 自适应高度 */}
          <Col xs={24} lg={12} xl={14}>
            <div style={{ 
              height: '100%', 
              display: 'flex', 
              flexDirection: 'column', 
              gap: '16px'
            }}>
              {/* 描述文字区域 - 自适应高度 */}
              <div
                style={{
                  padding: '24px', // 增加内边距
                  background: colors.background,
                  borderRadius: '12px',
                  fontSize: '16px',
                  lineHeight: '1.7',
                  color: colors.primaryDark,
                  border: `1px solid ${colors.border}`,
                  flex: 1, // 自适应高度
                  display: 'flex',
                  alignItems: 'flex-start',
                  minHeight: 'auto' // 移除固定最小高度
                }}
              >
                <div
                  style={{
                    backgroundColor: colors.badge,
                    color: 'white',
                    borderRadius: '50%',
                    width: '36px', // 稍微增大
                    height: '36px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontSize: '18px', // 增大字体
                    fontWeight: 'bold',
                    marginRight: '20px', // 增加右边距
                    flexShrink: 0,
                    marginTop: '2px' // 稍微向下对齐
                  }}
                >
                  {currentStep.stepOrder}
                </div>
                <div style={{ flex: 1 }}>
                  <Text style={{ 
                    fontSize: '16px', 
                    lineHeight: '1.7',
                    display: 'block',
                    whiteSpace: 'pre-wrap', // 保留换行
                    wordBreak: 'break-word' // 自动换行
                  }}>
                    {currentStep.description}
                  </Text>
                </div>
              </div>

              {/* 小提示 - 只在有提示时显示 */}
              {currentStep.tips && (
                <div
                  style={{
                    padding: '20px', // 增加内边距
                    background: colors.primary,
                    border: `1px solid ${colors.border}`,
                    borderRadius: '12px',
                    fontSize: '15px',
                    color: colors.primaryDark,
                    display: 'flex',
                    alignItems: 'flex-start',
                    flexShrink: 0,
                    minHeight: 'auto' // 自适应高度
                  }}
                >
                  <BulbOutlined style={{ 
                    marginRight: '12px', 
                    fontSize: '18px', 
                    marginTop: '2px', 
                    flexShrink: 0,
                    color: colors.primaryDark
                  }} />
                  <div style={{ flex: 1 }}>
                    <Text strong style={{ 
                      marginRight: '8px',
                      color: colors.primaryDark,
                      fontSize: '15px'
                    }}>小提示：</Text>
                    <Text style={{ 
                      color: colors.primaryDark,
                      fontSize: '15px',
                      lineHeight: '1.6',
                      whiteSpace: 'pre-wrap', // 保留换行
                      wordBreak: 'break-word' // 自动换行
                    }}>
                      {currentStep.tips}
                    </Text>
                  </div>
                </div>
              )}
            </div>
          </Col>
        </Row>
      </div>
    </Card>
  );
};

export default RecipeSteps;